import { FC, Fragment, useEffect, useRef } from 'react'
import { Carousel, } from 'antd';
import type { DotPosition, CarouselRef } from 'antd/es/carousel';

import './index.less'

interface propsT {
    width?: string | undefined
    height?: string | undefined
}

const videoCarousel: FC = (props: propsT) => {
    const { width = '200px', height = '100px' } = props
    const carouselRef = useRef<CarouselRef | null>(null);
    interface carouselPropsT {
        dotPosition: DotPosition
        beforeChange: Function
        afterChange: Function
    }
    const beforeChange = () => {

    }
    const afterChange = (current: number) => {
        if (current !== 1) carouselRef.current?.goTo(1, true)
    }
    const carouselKeyUp = (e: globalThis.KeyboardEvent) => {
        const { key } = e
        // console.log(key);
        if (key === 'ArrowDown') { //下
            e.preventDefault()
            carouselRef.current?.next()
        }
        else if (key === 'ArrowUp') {//上 
            e.preventDefault()
            carouselRef.current?.prev()
        }
    }
    const carouselProps: carouselPropsT = {
        dotPosition: "left",
        beforeChange,
        afterChange,
    }
    useEffect(() => {
        window.addEventListener('keyup', carouselKeyUp)
        return () => {
            window.removeEventListener('keyup', carouselKeyUp)
        }
    }, [])
    return (
        <Fragment>
            <Carousel ref={carouselRef} {...carouselProps} className='carousel-box' style={{ width, height }}>
                <div className='item' style={{ width, height }}>
                    image1
                </div>
                <div className='item' style={{ width, height }}>
                    video
                </div>
                <div className='item' style={{ width, height }}>
                    image2
                </div>
            </Carousel >
        </Fragment>
    )
}

export default videoCarousel